import React, { useContext } from 'react'
import { Button, Table, Popconfirm, Divider, Modal, Tooltip } from 'antd'
import moment from 'moment'
import style from './style.module.less'
import CKEditor from '@/components/CKEditor'
import IconSvg from '@/components/IconSvg'
import { platformSettingsContext } from '../../context'
import BaseTitle from '@/components/BaseTitle/index'

export default () => {
  const { publicNoticeConfig, tableDataType } = useContext(platformSettingsContext)

  const columns: any = [
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      width: 320,
      render: (value: string) => (value ? moment(value).format('YYYY-MM-DD  HH : mm : ss') : ''),
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
      align: 'center',
      ellipsis: true,
      width: 628,
      height: 40,
      render: (value: string) => (
        <div className={style.hiddenWrappr}>
          <Tooltip
            overlayStyle={{ maxWidth: 'none', maxHeight: 'none', width: 628 }}
            title={<span dangerouslySetInnerHTML={{ __html: value }} />}
            mouseEnterDelay={0.5}
          >
            {/* {value} */}
            <span dangerouslySetInnerHTML={{ __html: value }} />
          </Tooltip>
        </div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      fixed: 'right',
      width: 220,
      render: (text: any, record: any) => (
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
          <Button type='link' onClick={() => publicNoticeConfig.publicNoticeExamineShowOpen(record)}>
            <IconSvg name='cityExamine' style={{ marginRight: 5 }} />
            查看
          </Button>
          <Divider type='vertical' />
          <Button type='link' style={{ color: 'red' }}>
            <Popconfirm
              onConfirm={() => {
                publicNoticeConfig.publicNoticeDeleteData(record)
              }}
              title='确定删除吗？'
              okText='确定'
              cancelText='取消'
            >
              <IconSvg name='cityDelete' style={{ marginRight: 5 }} />
              删除
            </Popconfirm>
          </Button>
        </div>
      ),
    },
  ]
  return (
    <div className={style.maxEditBox}>
      <div className={style.editor}>
        <div className={style.center}>
          <div className={style.centerEditor}>
            <CKEditor
              value={publicNoticeConfig.publicNoticeOverview}
              onChange={publicNoticeConfig.getPublicNoticeTextFont}
            />
          </div>
          <div className={style.buttonBoxDiv}>
            <Button onClick={publicNoticeConfig.publicNoticeClickSave} type='primary'>
              保存
            </Button>
          </div>
        </div>
      </div>
      <div className={style.bottomTableBox}>
        <Table dataSource={tableDataType.tableData} columns={columns} scroll={{ x: 1168 }} />
      </div>
      <Modal
        footer={null}
        width={850}
        title='查看详情'
        open={publicNoticeConfig.publicNoticeOpen}
        onCancel={publicNoticeConfig.clearPublicNoticeOpen}
      >
        <div className={style.modalBox}>
          {/* <div className={style.top}>
            <BaseTitle text='中心任务' style={{ marginBottom: '24px' }} />
            <div style={{ padding: '0px 20px' }}>{publicNoticeConfig.publicNoticeModalFont.publicNoticeCenter}</div>
          </div>
          <div className={style.bottom}>
            <BaseTitle text='领导团队' style={{ marginBottom: '24px' }} />
          </div> */}
          <div dangerouslySetInnerHTML={{ __html: publicNoticeConfig.publicNoticeModalFont.publicNoticeCenter }} />
        </div>
      </Modal>
    </div>
  )
}
